程式碼盡量只寫要說明的地方，無關的就不贅述。

(2)建立要導出的資料
試著整理出動態渲染畫面所需的資料實體有哪些。以下說明 <script></script> 資料實體裡每個屬性設計用來存放哪些資料。

• restaurants：從餐廳 API 取得的資料。屬性有 brandName 、 address 、 type 。
• userResList：從會員餐廳 API 取得的資料。屬性有 name、email、userRestaurants（底下有 brandName 、 address 、 type 屬性）。
• tempRes：會員選完「品牌受眾」、「品牌名稱」的項目值放在 tempRes 裡相應的屬性中。屬性定義為一空陣列 [ ]，後續可使用 forEach 、 filter 等陣列方法。屬性有 filterBrandNamee 、 filterType 、 filterAddress 。最後會再賦值給 filterRes 裡的屬性。
• filterRes：依照會員選的項目值（tempRes）為條件去過濾從餐廳 API 取得的資料（restaurants），符合條件的內容（如列出符合所選品牌受眾的品牌名稱列表）放在 filterRes 裡相應的屬性中。屬性有 selectBrandName 、 selectType 。
• saveRes：會員選好的餐廳且處理完畢，用來直接存放寫回會員餐廳 API 的資料。屬性有 saveBrandName 、 saveType 、 saveAddress 。
• brandListDisabled：控制品牌名稱的下拉選單是否可以操作。
• apiUserResUrl 與 apiUserResIdUrl：網路請求的路徑。為使方法裡的函式可以取用該變數（全域變數）而設置。

<script>
import axios from "axios";

export default {
  data() {
    return {
      restaurants: [],
      userResList: [],
      filterRes: {
        filterBrandNamee: [],
        filterType: [],
        filterAddress: [],
      },
      tempRes: {
        selectBrandName: "",
        selectType: "",
      },
      saveRes: {
        saveBrandName: "",
        saveType: "",
        saveAddress: "",
      },
      brandListDisabled: true,
      apiUserResUrl: "",
      apiUserResIdUrl: "",
    };
  }
}
</script>

(3)動作拆解
表單中各欄位的資料渲染方式依序說明如何編寫 JavaScript 。

(3-1)動作拆解-取得餐廳 API
在 HTML 模板渲染後，可取到 DOM 元素的階段（即 mounted）呼叫方法裡的 pocket() 函式去取餐廳 API 的全部資料並存放於 data 資料實體中屬性 restaurants 內。這個操作是為了確保當使用者訪問網頁時，能立即獲取到餐廳相關的資料，內容包含「品牌受眾」、「品牌名稱」、「地址」。使之提供後續會員操作網頁時，可藉以進行搜尋與過濾等網路請求。

<script>
export default {
  ...
  methods: {
    pocket() {
      axios
        .get("http://localhost:3001/restaurants")
        .then((res) => {
          // 請求成功會觸發/執行這個 function 函式
          this.restaurants = res.data;
        })
        .catch((error) => {
          // 請求失敗則觸發/執行這個 function 函式
          console.log(error);
        });
    },
  },
  ,
  mounted() {
    this.pocket();
  },
};
...
</script>